<template>
    <div id="box">
        <div class="search_box">
            <!-- 搜索区域 -->
            <form class="search">
                <van-icon name="arrow-left" @click="goback" />
                <van-search v-model="value" show-action placeholder="清风抽纸" shape="round">
                    <template #action>
                        <div @click="onSearch">搜索</div>
                    </template>
                </van-search>
            </form>
            <!-- 最近搜索 -->
            <div class="newsearch" style="margin-bottom:30px;">
                <div>
                    <b style="margin-right:10px;">最近搜索</b>
                    <van-icon name="delete-o" @click="clear"/>
                </div>
                <ul>
                    <li v-for="item in searchValue" :key="item">{{item}}</li>
                </ul>
            </div>

            <!-- 热门搜索 -->
            <div class="hot_search">
                <h4>热门搜索</h4>
                <ul>
                    <li  v-for=" goods in goodslist" :key="goods" @click="gosearch(goods)">{{goods}}</li>
                </ul>
            </div>
        </div>
    </div>

</template>

<script>
export default {
    data() {
        return {
            value: '',
            searchValue:[],
            goodslist:[]

        };
    },
    methods: {
        // 添加最近搜索
        onSearch(){
            let arr =this.searchValue
            arr.unshift(this.value)
            
            this.searchValue=arr
            console.log('第一个搜索里面value',this.value);
            this.$router.push('/searchList?keyword='+this.value)


        },
        // 清除最近搜索
        clear(){
            this.searchValue = []
        },
        goback(){
            this.$router.back()
        },
        gosearch(goods){
            this.$router.push('/searchList?keyword='+goods)
        }
    },
    created(){
        
        // 获取热门搜索列表
        this.$service({
            method:'get',
            url:'pro/hotword',
        })
        .then(res=>{
            if(res.data.code ==200){
                let data = res.data.data
                data.forEach(items => {
                    if(items.keyword){
                    this.goodslist.push(items.keyword)
                    }else{
                        this.goodslist.push(null)
                    }
                });
                // console.log("this.goodslist",this.goodslist);
            }
        })
    }
};
</script>

<style scoped>
#box {
    background-color: #efefef;
    height: 100%;
}

/* 搜索区域 */
.search_box {
    padding: 0 .625rem;
    background-color: white;
}

.search {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.van-search {

    flex: 1;
}

#app form>div>div.van-search__action {
    background-color: red;
    color: white;
    border-radius: .3125rem;
    width: 2.125rem;
    height: 1.5rem;
    text-align: center;
    line-height: 1.5rem;
}

/* 最近搜索、热门搜索 */
ul {
    display: flex;
    flex-wrap: wrap;
}

ul li {
    border: 1px solid gray;
    color: gray;
    font-size: 12px;
    margin: .625rem;
    padding: .3125rem .625rem;
}
</style>>

</style>